<template>
      <div>
            <div class="container">
                  <div class="header">
                        <h1 class="title">B站弹幕情感分析</h1>
                  </div>
                  <div class="form">
                        <div class="input-container">
                              <input type="text" v-model="videoUrl" placeholder="请输入B站视频链接" class="input" />
                              <button @click="submitVideoUrl" class="button">提交</button>
                        </div>
                        <div class="message">{{ message }}</div>
                  </div>
                  
            </div>
            <el-dialog title="分析" :visible.sync="formVisible" width="30%" :before-close="$utils.handleClose">
                  <el-col :span="24" id="main"></el-col>
            </el-dialog>
      </div>
</template>

<script>
import "echarts-wordcloud/dist/echarts-wordcloud";
import "echarts-wordcloud/dist/echarts-wordcloud.min";
export default {
      name: "",
      props: [],
      data() {
            return {
                  videoUrl: "",
                  sentimentData: [],
                  message: "",
                  chart: "",
                  series: [],
                  formVisible: false,
                  worddata:[],
                  wordcloud:''
            };
      },
      methods: {
            submitVideoUrl() {
                  if(this.videoUrl){
                        window.sessionStorage.setItem("url", this.videoUrl);
                        this.$router.push('/admin/result');
                  }
                  // this.$root.loading = true;
                  // let formData = new FormData();
                  // formData.append("url", this.videoUrl);
                  // // 发送 POST 请求，将 inputText 提交给服务器
                  // this.$axios({
                  //       url: this.$url + "/client/senta",
                  //       method: "POST",
                  //       data: formData,
                  // }).then((res) => {
                  //       this.sentimentData = res.data.data.sentaList;
                  // });
            },
            show() {
                  this.formVisible = true;
                  this.series = [];
                  let success = {
                        name: "积极",
                        value: 0,
                  };
                  let danger = {
                        name: "消极",
                        value: 0,
                  };
                  let info = {
                        name: "中性",
                        value: 0,
                  };
                  let warning = {
                        name: "字数不足",
                        value: 0,
                  };
                  this.sentimentData.forEach((item) => {
                        if (item.state == 1) {
                              success.value++;
                        } else if (item.state == -1) {
                              danger.value++;
                        } else if (item.state == 2) {
                              warning.value++;
                        } else {
                              info.value++;
                        }
                  });
                  this.series.push(success);
                  this.series.push(danger);
                  this.series.push(warning);
                  this.series.push(info);
                  setTimeout(() => {
                        this.initEcharts();
                        // this.initWordCloudEcharts();
                  }, 1000);
            },
            initEcharts() {
                  var chartDom = document.getElementById("main");
                  this.echarts = this.$echarts.init(chartDom);
                  var option = {
                        tooltip: {
                              trigger: "item",
                        },
                        legend: {
                              orient: "vertical",
                              left: "left",
                        },
                        series: [
                              {
                                    name: "Access From",
                                    type: "pie",
                                    radius: "50%",
                                    data: this.series,
                                    emphasis: {
                                          itemStyle: {
                                                shadowBlur: 10,
                                                shadowOffsetX: 0,
                                                shadowColor: "rgba(0, 0, 0, 0.5)",
                                          },
                                    },
                              },
                        ],
                  };

                  option && this.echarts.setOption(option);
            },
            initWordCloudEcharts() {
                  for(let i=0;i<10;i++){
                        if(this.sentimentData[i]){
                              let item={
                                    name:this.sentimentData[i].line,
                                    value:i+1
                              }
                              this.worddata.push(item);
                        }
                  }

                  var chartDom = document.getElementById("wordcloud");
                  this.wordcloud = this.$echarts.init(chartDom);
                  const option = {
                        title: {
                              text: "弹幕词云",
                              x: "center",
                        },
                        backgroundColor: "#fff",
                        series: [
                              {
                                    type: "wordCloud",
                                    //用来调整词之间的距离
                                    gridSize: 10,
                                    //用来调整字的大小范围
                                    // Text size range which the value in data will be mapped to.
                                    // Default to have minimum 12px and maximum 60px size.
                                    sizeRange: [14, 60],
                                    // Text rotation range and step in degree. Text will be rotated randomly in range [-90,                                                                             90] by rotationStep 45
                                    //用来调整词的旋转方向，，[0,0]--代表着没有角度，也就是词为水平方向，需要设置角度参考注释内容
                                    // rotationRange: [-45, 0, 45, 90],
                                    // rotationRange: [ 0,90],
                                    rotationRange: [0, 0],
                                    //随机生成字体颜色
                                    // maskImage: maskImage,
                                    textStyle: {
                                          normal: {
                                                color: function() {
                                                      return "rgb(" + Math.round(Math.random() * 255) + ", " + Math.round(Math.random() * 255) + ", " + Math.round(Math.random() * 255) + ")";
                                                },
                                          },
                                    },
                                    //位置相关设置
                                    // Folllowing left/top/width/height/right/bottom are used for positioning the word cloud
                                    // Default to be put in the center and has 75% x 80% size.
                                    left: "center",
                                    top: "center",
                                    right: null,
                                    bottom: null,
                                    width: "200%",
                                    height: "200%",
                                    //数据
                                    data: this.worddata,
                              },
                        ],
                  };

                  option && this.wordcloud.setOption(option);
            },
      },
};
</script>

<style scoped>
#main {
      width: 400px;
      height: 400px;
}
.container {
      max-width: 960px;
      margin: 0 auto;
      padding: 40px 20px;
}

.header {
      text-align: center;
}

.title {
      font-size: 36px;
      color: #0077ff;
      margin-bottom: 40px;
}

.form {
      display: flex;
      flex-direction: column;
      align-items: center;
}

.input-container {
      display: flex;
      align-items: center;
      margin-bottom: 20px;
}

.input {
      padding: 16px;
      border-radius: 4px 0 0 4px;
      border: 1px solid #ccc;
      font-size: 16px;
      outline: none;
      width: 400px;
}

.button {
      padding: 16px;
      border-radius: 0 4px 4px 0;
      background-color: #0077ff;
      color: #fff;
      border: none;
      cursor: pointer;
      font-size: 16px;
}

.message {
      text-align: center;
      color: red;
      margin-bottom: 20px;
}

.results {
      margin-top: 40px;
}

.results-title {
      font-size: 24px;
      margin-bottom: 20px;
}

.results-list {
      list-style: none;
      margin: 0;
      padding: 0;
}

.results-item {
      margin-bottom: 16px;
      padding: 16px;
      border-radius: 4px;
      font-size: 18px;
      color: #444;
}

.positive {
      background-color: #a6e22e;
      color: #fff;
}

.negative {
      background-color: #ff3d3d;
      color: #fff;
}

.neutral {
      background-color: #ccc;
      color: #fff;
}
</style>
